<template>
    <view class="progress-card card">
      <view class="progress-title">{{ title }}</view>
      <view class="progress-container">
        <progress 
          :percent="percent" 
          :stroke-width="14" 
          :color="color" 
          :backgroundColor="backgroundColor"
        />
        <view class="progress-percent">{{ percent }}%</view>
      </view>
      <view class="progress-detail" v-if="showDetail">
        <slot></slot>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'ProgressCard',
    props: {
      title: {
        type: String,
        default: '进度'
      },
      percent: {
        type: Number,
        default: 0
      },
      color: {
        type: String,
        default: '#3c8dbc'
      },
      backgroundColor: {
        type: String,
        default: '#f3f3f3'
      },
      showDetail: {
        type: Boolean,
        default: true
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .progress-card {
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .progress-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
  }
  
  .progress-container {
    margin-bottom: 30rpx;
  }
  
  .progress-percent {
    text-align: center;
    font-size: 24rpx;
    color: #3c8dbc;
    margin-top: 10rpx;
  }
  
  .progress-detail {
    margin-top: 30rpx;
  }
  </style>